<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/mobileSelect.css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>我的奖品</title>
    <style>
        .layui-m-layerchild{
            width: 80% !important;
        }
        .layui-m-layercont{
            padding: 0!important;
            line-height: normal!important;
            text-align: left!important;
        }
    </style>
</head>
<body class="whiteBg">
<div class="daohanglan_box daohanglan_box2">
    <div class="title">
        <i class="icon iconfont icon-iconfontjiantou1"></i>
        <h4>我的奖品</h4>
    </div>
</div>
<ul class="weilingqu flex">
    <li class="act flex-1">未领取（3）</li>
    <li class="flex-1">领取中心</li>
</ul>
<div class="weilingqu1 clearfix">
    <div class="jiangpin">
        <div class="clearfix">
            <div class="tu_box fl">
                <img class="tu" src="images/choujiang.png" />
            </div>
            <div class="zi2 fl">洗衣液一瓶</div>
        </div>
        <div class="lingqushijian fl">领取期限：2018.06.24 - 2018.09.24</div>
        <div class="qulingqu fr">去领取></div>
    </div>
    <div class="jiangpin">
        <div class="clearfix">
            <div class="tu_box fl">
                <img class="tu" src="images/choujiang.png" />
            </div>
            <div class="zi2 fl">洗衣液一瓶</div>
        </div>
        <div class="lingqushijian fl">领取期限：2018.06.24 - 2018.09.24</div>
        <div class="qulingqu fr">去领取></div>
    </div>
    <div class="jiangpin">
        <div class="clearfix">
            <div class="tu_box fl">
                <img class="tu2" src="images/choujiang2.png" />
            </div>
            <div class="zi2 fl">洗衣液一瓶</div>
        </div>
        <div class="lingqushijian fl">领取期限：2018.06.24 - 2018.09.24</div>
        <div class="qulingqu fr">去领取></div>
    </div>
</div>
<div class="weilingqu1 clearfix yc">
    <ul>
        <li class="zi3">
            <a href="订单详情.html">
                30积分
                <div class="clearfix">
                    <div class="zi4 fl">领取时间：2018.06.24 12:24</div>
                    <img class="jiangpin_img" src="images/youfangye.png" />
                    <div class="zi5 fr zzbf">状态：正在备货</div>
                </div>
            </a>
        </li>
        <li class="zi3">
            <a href="订单详情.html">
                50积分
                <div class="clearfix">
                    <div class="zi4 fl">领取时间：2018.06.24 12:24</div>
                    <img class="jiangpin_img" src="images/youfangye.png" />
                    <div class="zi5 fr yfh">状态：已发货</div>
                </div>
            </a>
        </li>
    
        <li class="zi3">
            <a href="订单详情.html">
                10积分
                <div class="clearfix">
                    <div class="zi4 fl">领取时间：2018.06.24 12:24</div>
                    <img class="jiangpin_img" src="images/youfangye.png" />
                    <div class="zi5 fr ylq">状态：已领取</div>
                </div>
            </a>
        </li>
        <li class="zi3">
            <a href="订单详情.html">
                100积分
                <div class="clearfix">
                    <div class="zi4 fl">领取时间：2018.06.24 12:24</div>
                    <img class="jiangpin_img" src="images/youfangye.png" />
                    <div class="zi5 fr lqsb">状态：领取失败</div>
                </div>
            </a>
        </li>
        <li class="zi3">
            <a href="订单详情.html">
                30积分
                <div class="clearfix">
                    <div class="zi4 fl">领取时间：2018.06.24 12:24</div>
                    <img class="jiangpin_img" src="images/youfangye.png" />
                    <div class="zi5 fr ylq">状态：已领取</div>
                </div>
            </a>
        </li>
        <li class="zi3">
            <a href="订单详情.html">
                大米
                <div class="clearfix">
                    <div class="zi4 fl">领取时间：2018.06.24 12:24</div>
                    <img class="jiangpin_img" src="images/youfangye.png" />
                    <div class="zi5 fr ylq">状态：已领取</div>
                </div>
            </a>
        </li>
        <li class="zi3">
            <a href="订单详情.html">
                洗衣液
                <div class="clearfix">
                    <div class="zi4 fl">领取时间：2018.06.24 12:24</div>
                    <img class="jiangpin_img" src="images/youfangye.png" />
                    <div class="zi5 fr ylq">状态：已领取</div>
                </div>
            </a>
        </li>
        <li class="zi3">
            <a href="订单详情.html">
                30积分
                <div class="clearfix">
                    <div class="zi4 fl">领取时间：2018.06.24 12:24</div>
                    <img class="jiangpin_img" src="images/youfangye.png" />
                    <div class="zi5 fr ylq">状态：已领取</div>
                </div>
            </a>
        </li>
    </ul>
</div>
<script src="js/address/address-id.js" type="text/javascript"></script>
<script src="js/address/city-picker.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script>
    $(function () {
        $("weilingqu1").eq(0).show();
        $(".weilingqu").on("click", "li", function () {
            $(this).addClass('act').siblings().removeClass('act');
            var num = $(this).index();
            $(".weilingqu1").eq(num).fadeIn().siblings(".weilingqu1").fadeOut();
        });
        //领取弹窗
        $(".weilingqu1").on("click", ".qulingqu", function () {
            layer.open({
                shadeClose: false,
                content: '\<\div id="receiveInfo">' +
                '<div class="title">信息填写<i class="close">×</i></div>' +
                '<form>' +
                '<div class="whiteMain">' +
                '<div class="grayBg"><label>姓名：</label><input type="text" id="name"/></div>' +
                '<div class="grayBg"><label>电话：</label><input type="text" id="tell"/></div>' +
                '<div class="grayBg"><label>地址：</label><input type="text" id="city-picker" readonly/> <i class="icon iconfont icon-youjiantou"></i></div>' +
                '<div class="grayBg"><label>详细地址：</label><input type="text" id="address"/></div>' +
                '<div class="grayBg"><label>发货方式：</label><input type="text" id="delivery" readonly/><i class="icon iconfont icon-youjiantou"></i></div>' +
                '<div class="grayBg selfBox"><label>自取点：</label><input type="text" id="self" readonly/><i class="icon iconfont icon-youjiantou"></i></div>' +
                '<div class="grayBg remarks"><span>备注：</span><textarea id="remarks"></textarea></div>' +
                '<p class="tip">小提示：请认真核对，提交后不可更改哦~</p>' +
                '<button type="button" class="confirmBtn">确定</button>' +
                '</div>' +
                '</form>' +
                '\<\/div>'
            });
        });
        //地址选择
        $("body").on("focus", "#city-picker", function () {
            $(this).cityPicker({
                title: "选择地址",
                onChange: function (picker, values, displayValues) {
                    //                        console.log(values, displayValues);
                }
            })
        });
        //发货方式选择
        var delivery = ['自取', '快递'];
        $("body").on("focus", "#delivery", function () {
            $(this).picker({
                title: "发货方式",
                cols: [
                    {
                        textAlign: 'center',
                        values: delivery
                    }
                ],
                onClose: function(value) {
                    if(value.displayValue == '自取'){
                        $(".selfBox").fadeIn();
                    }else{
                        $(".selfBox").hide();
                    }
                }
            });
        });
        //自取点选择
        var self = ['自取一', '自取二', '自取三'];
        $("body").on("focus", "#self", function () {
            $(this).picker({
                title: "请选择自取点",
                cols: [
                    {
                        textAlign: 'center',
                        values: self
                    }
                ]
            });
        });
        //关闭弹窗
        $(document).on("click", ".close", function () {
            layer.closeAll();
        });
        //点击确定
        $("body").on("click", ".confirmBtn", function () {
            var name = $("#name").val();
            var tell = $("#tell").val();
            var city = $("#city-picker").val();
            var address = $("#address").val();
            var delivery = $("#delivery").val();
            if (name == "") {
                error('请输入姓名');
            } else if (tell == "") {
                error('请输入手机号');
            } else if (!tell.match(/^1[3|4|5|7|8]\d{9}$/)) {
                error('请输入正确的手机号');
            } else if (city == "") {
                error('请选择地址');
            } else if (address == "") {
                error('请输入详细地址');
            } else if (delivery == "") {
                error('请选择发货方式');
            } else {
                location.reload();
                layer.closeAll();
            }
        });



    })
</script>



</body>
</html>